<template>
  <div>
    <el-row>
      <el-col :span="20">
        <div class="label-wrap">
          <label for="">关键字: </label>
          <div class="wrap-content">
            <el-row>
              <el-col :span="3">
                <x-select :config="data.configOption"></x-select>
              </el-col>
              <el-col :span="5">
                <el-input size="mini" placeholder="请输入搜索的关键字"></el-input>
              </el-col>
              <el-col :span="16">
                <el-button size="mini">搜索</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <el-button type="danger" class="pull-right">添加用户</el-button>
      </el-col>
    </el-row>
    <div class="black-space-30"></div>
    <XTable :config="data.configTable">
      <template v-slot:status="{ row }">
        <el-switch v-model="row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
      <template v-slot:operation="{ row }">
        <el-button type="danger" size="mini" @click="operation(row)">删除</el-button>
        <el-button type="success" size="mini" @click="operation(row)">编辑</el-button>
      </template>
    </XTable>
  </div>
</template>

<script>
import { reactive } from "@vue/composition-api";
import XSelect from "../../components/Select";
import XTable from "../../components/Table";
import requestUrl from "../../api/requestUrl";
export default {
  components: {
    XSelect,
    XTable
  },
  setup(props) {
    const data = reactive({
      configOption: ["name", "phone", "email"],
      configTable: {
        // 翻页时保留选中的记录
        recordCheckbox: true,
        // 多选框
        selection: false,
        // 表头
        tHead: [
          {
            label: "邮箱/用户名",
            field: "email",
            width: 120
          },
          {
            label: "真实姓名",
            field: "name",
            width: 180
          },
          {
            label: "手机号",
            field: "phone"
          },
          {
            label: "地区",
            field: "address"
          },
          {
            label: "角色",
            field: "role"
          },
          {
            label: "禁用启用",
            field: "status",
            columnType: "slot",
            slotName: "status"
          },
          {
            label: "操作",
            columnType: "slot",
            slotName: "operation"
          }
        ],
        // 请求接口URL
        requestParam: {
          url: requestUrl.getUserList,
          method: "post",
          data: {
            pageNumber: 1,
            pageSize: 10
          }
        },
        pagination: {
          show: true,
          layout: "total, sizes, prev, pager, next, jumper"
        }
      }
    });

    /** === === === === === === method === === === === === ===*/
    //#region
    const operation = data => {
      console.log(data);
    };
    //#endregion

    return {
      data,
      operation
    };
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/index";
.label-wrap {
  @include labelDom(left, 60, 40);
}
</style>
